$(function () {
    var layer = layui.layer;
    // 获取裁剪区的dom元素
    var imgs = $('#imgs');
    //配置选项
    const options = {
        //横纵比
        aspectRatio: 1,
        //指定预览区域
        preview: '.img-preview'
    }
    //创建裁剪区域
    imgs.cropper(options);
    //为上传按钮绑定点击事件

    $('#btnhooseImage').on('click', function () {
        //模拟点击了上传文件
        $('#file').click();
    })

    //为文件选择框绑定一个change事件
    $('#file').on('change', function (e) {
        //获取用户选择的文件
        var fileList = e.target.files;
        console.log(fileList);
        if (fileList.length == 0) return layer.msg('请选择图片')
        //拿到用户选择的文件
        var file = e.target.files[0];
        //将文件转换成路径
        var imgURL = URL.createObjectURL(file);
        imgs.cropper('destroy').attr('src', imgURL).cropper(options);

        //为确定按钮，绑定点击事件
        $('#btnUpload').on('click', () => {
            //拿到用户裁剪之后的头像
            var dataURL = imgs.cropper('getCroppedCanvas', {
                //创建一个canvas画布
                width: 100,
                height: 100
            }).toDataURL('image/png');
            //toDataURL将canvas上的内容转换成base64字符串
            //调用接口
            $.ajax({
                type: 'post',
                url: '/my/update/avatar',
                headers: {
                    'Authorization': localStorage.getItem('token')
                },
                data: {
                    avatar: dataURL
                },
                success: (res) => {
                    if (res.status != 0) return layer.msg('更换头像失败！');
                    layer.msg('更换头像成功！');
                }
            })

        })
    })
})